<template>
	<view class="">
		<u-form :model="form" ref="uForm_2" label-position="top" :label-style="labelStyle">
			<view class="form-title">营业执照信息</view>
			<view class="u-p-x-30">
				<u-form-item label="公司类型" prop="ent_type_name">
          <view style="width:100%" @click="entTypeShow = true">
            <u-input style="pointer-events: none" v-model="form.ent_type_name" type="select" placeholder="请选择公司类型"/>
          </view>
				</u-form-item>
				<u-form-item label="营业执照编号" prop="business_no">
					<u-input v-model="form.business_no"  placeholder="请填写营业执照编号"/>
				</u-form-item>
				<u-form-item label="上传营业执照" prop="business_image">
					<u-upload @on-choose-complete="uploadSuccess" index="business_image" :file-list="log.business_image ? [{url:log.business_image}] : []" ref="uUpload1" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
				</u-form-item>
				<u-form-item label="营业执照有效期开始日期" prop="licenseStartDate">
          <view style="width:100%" @click="licenseStartShow = true">
					  <u-input style="pointer-events: none" v-model="form.licenseStartDate" type="select" placeholder="请选择营业执照有效期开始日期" />
          </view>
				</u-form-item>
				<u-form-item label="营业执照有效期" prop="license_validity_type">
					<u-radio-group v-model="form.license_validity_type" @change="radioChange('license_validity_type')">
						<u-radio :name="0" active-color="#FE572A"> 非长期有效 </u-radio>
						<u-radio :name="1" active-color="#FE572A"> 长期有效 </u-radio>
					</u-radio-group>
				</u-form-item>
				<view v-show="form.license_validity_type == 0">
					<u-form-item label="营业执照有效期截止日期" prop="licenseEndDate">
            <view style="width: 100%;" @click="licenseEndShow = true">
              <u-input style="pointer-events: none" v-model="form.licenseEndDate" type="select" placeholder="请选择营业执照有效期截止日期" />
            </view>
					</u-form-item>
				</view>
				<u-form-item label="企业注册地址" prop="reg_region">
          <view style="width: 100%;" @click="showRegion = true">
            <u-input style="pointer-events: none" v-model="form.reg_region" type="select"/>
          </view>
				</u-form-item>
				<u-form-item label="企业注册详细地址" prop="reg_detail">
					<view class="flex-1 u-p-x-5" style="background-color: #f5f5f5;">
						<u-input v-model="form.reg_detail" maxlength="100" type="textarea" placeholder="请填写企业注册详细地址"/>
					</view>
				</u-form-item>
				<u-form-item label="企业注册资本" prop="reg_capital">
					<u-input v-model="form.reg_capital" type="number" height="50" placeholder="请填写注册资本"/>
				</u-form-item>
				<u-form-item label="企业成立时间" prop="foundDate">
          <view style="width: 100%;" @click="foundShow = true">
            <u-input style="pointer-events: none" v-model="form.foundDate" type="select"  placeholder="请选择成立时间" />
          </view>
				</u-form-item>
			</view>
			<view class="form-title">法人信息</view>
			<view class="u-p-x-30">
				<u-form-item label="法人姓名" prop="legal_name">
					<u-input v-model="form.legal_name" placeholder="请填写法人姓名"/>
				</u-form-item>
				<u-form-item label="法人身份证号码" prop="legal_cert_no">
					<u-input v-model="form.legal_cert_no" placeholder="请填写法人身份证号码"/>
				</u-form-item>
				<u-form-item label="法人证件开始日期" prop="legalCertStartDate">
          <view style="width: 100%;" @click="legalCertStartShow = true">
            <u-input style="pointer-events: none" v-model="form.legalCertStartDate" type="select" placeholder="请选择法人证件有效期" />
          </view>
				</u-form-item>
				<u-form-item label="法人证件有效期" prop="legal_cert_validity_type">
					<u-radio-group v-model="form.legal_cert_validity_type" @change="radioChange('legal_cert_validity_type')">
						<u-radio :name="0" active-color="#FE572A"> 非长期有效 </u-radio>
						<u-radio :name="1" active-color="#FE572A"> 长期有效 </u-radio>
					</u-radio-group>
				</u-form-item>
				<view v-show="form.legal_cert_validity_type == 0">
					<u-form-item label="法人证件结束日期" prop="legalCertEndDate">
            <view style="width: 100%;" @click="legalCertEndShow = true">
						  <u-input style="pointer-events: none" v-model="form.legalCertEndDate" type="select" placeholder="请选择法人证件结束日期" />
            </view>
					</u-form-item>
				</view>
				<u-form-item label="法人身份证地址" prop="legal_addr">
					<u-input v-model="form.legal_addr" placeholder="请填写法人身份证地址"/>
				</u-form-item>
				<u-form-item label="法人身份证国徽面" prop="card_behind_image">
					<u-upload @on-choose-complete="uploadSuccess" index="card_behind_image" :file-list="log.card_behind_image ? [{url:log.card_behind_image}] : []" ref="uUpload2" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
				</u-form-item>
				<u-form-item label="法人身份证人像面" prop="card_front_image">
					<u-upload @on-choose-complete="uploadSuccess" index="card_front_image" :file-list="log.card_front_image ? [{url:log.card_front_image}] : []" ref="uUpload3" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
				</u-form-item>
			</view>
		</u-form>
		<u-select v-model="entTypeShow" :list="entTypeList" label-name="name" value-name="id" @confirm="entTypeConfirm"></u-select>
		<u-picker v-model="showRegion" mode="region" @confirm="confirmRegion"></u-picker>
		<u-picker mode="time" v-model="legalCertStartShow" @confirm="legalCertStartChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<u-picker mode="time" v-model="legalCertEndShow" @confirm="legalCertEndChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<u-picker mode="time" v-model="licenseStartShow" @confirm="licenseStartChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<u-picker mode="time" v-model="licenseEndShow" @confirm="licenseEndChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<u-picker mode="time" v-model="foundShow" @confirm="foundChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<view class="bg-white">
			<view class="flex align-center justify-evenly u-p-30">
				<dy-button width="250rpx" size="default" color="#FE572A" backgroundColor="#fff" borderColor="#FE572A" @click="back">上一步</dy-button>
				<dy-button width="250rpx" size="default" @click="submit">下一步</dy-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		name:'Step2',
		data() {
			return {
				entTypeShow: false,
				legalCertStartShow: false,
				legalCertEndShow: false,
				licenseStartShow: false,
				licenseEndShow: false,
				foundShow:false,
				showRegion:false,
				form: {
					ent_type:'',
					ent_type_name:'',
					business_no:'',
					business_image:'',
					license_validity_type:0,
					licenseStartDate:'',
					license_begin_date:'',
					licenseEndDate:'',
					license_end_date:'',
					reg_region:'',
					reg_detail:'',
					reg_capital:'',
					found_date:'',
					foundDate:'',
					legal_name:'',
					legal_cert_validity_type:0,
					legalCertStartDate:'',
					legal_cert_begin_date:'',
					legalCertEndDate:'',
					legal_cert_end_date:'',
					legal_cert_no:'',
					legal_addr:'',
					card_behind_image:'',
					card_front_image:'',
				},
				rules: {
					ent_type_name: [
						{
							validator: (rule, value, callback) => {
								if (!this.form.ent_type) {
									callback(new Error("请选择公司类型"));
								} else {
									callback();
								}
							}
						},
					],
					business_no: [{required: true,message: '请输入营业执照编号',trigger: ['blur', 'change']}],
					reg_detail: [{required: true,message: '请输入企业注册详细地址',trigger: ['blur', 'change']}],
					legal_name: [{required: true,message: '请填写法人姓名',trigger: ['blur', 'change']}],
					legal_cert_no: [{required: true,message: '请填写法人身份证号码',trigger: ['blur', 'change']}],
					legal_addr: [{required: true,message: '请填写法人身份证地址',trigger: ['blur', 'change']}],
				},
				entTypeList: [
					{ id: 1 , name: "政府机构"},
					{ id: 2 , name: "国营企业"},
					{ id: 3 , name: "私营企业"},
					{ id: 4 , name: "外资企业"},
					{ id: 5 , name: "个体工商户"},
					{ id: 7 , name: "事业单位"},
				],
				labelStyle:{
					fontSize: '28rpx',
					fontWeight:'bold',
				},
				log:{}
			}
		},
		props: {
			logData: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		async mounted() {
			this.$refs.uForm_2.setRules(this.rules);
			this._applyIndex()
		},
		methods: {
			...mapActions({ upload:'user/upload' }),
			submit(){
				this.$refs.uForm_2.validate(valid => {
					if (valid) {
						let files1 = this.$refs.uUpload1.lists
						if(!files1.length) return this.$u.toast('请上传营业执照', 2000)
						let files2 = this.$refs.uUpload2.lists
						if(!files2.length) return this.$u.toast('请上传法人身份证国徽面', 2000)
						let files3 = this.$refs.uUpload3.lists
						if(!files3.length) return this.$u.toast('请上传法人身份证人像面', 2000)
						uni.setStorageSync('applyForm_2', this.form)
						this.$emit('submit', this.form);
					}
				});
			},
			_applyIndex() {
				if(JSON.stringify(this.logData) === '{}'){
					let applyForm = uni.getStorageSync('applyForm_2')
					if(applyForm){
						Object.keys(this.form).forEach(key => {
							if (applyForm.hasOwnProperty(key)) {
								this.form[key] = applyForm[key];
							}
						})
						this.log = applyForm
					}
				}else{
					Object.keys(this.form).forEach(key => {
						if (this.logData.hasOwnProperty(key)) {
							this.form[key] = this.logData[key];
						}
					})
					this.log = this.logData
				}
				this.form.ent_type_name = this.log.ent_type_text || this.log.ent_type_name || ''
				this.form.reg_region = this.log.reg_region_text || ''
				this.form.licenseStartDate = this.log.licenseStartDate || this.log.license_begin_date || ''
				this.form.licenseEndDate = this.log.licenseEndDate || this.log.license_end_date || ''
				this.form.legalCertStartDate = this.log.legalCertStartDate || this.log.legal_cert_begin_date || ''
				this.form.legalCertEndDate = this.log.legalCertEndDate || this.log.legal_cert_end_date || ''
				this.form.foundDate = this.log.foundDate || this.log.found_date || ''
			},
			back(){
				this.$emit('back');
			},
			entTypeConfirm(data) {
				this.form.ent_type_name = data[0].label
				this.form.ent_type = data[0].value
			},
			confirmRegion(e) {
				this.form.reg_region = `${e.province.label},${e.city.label},${e.area.label}`
			},
			foundChange(e) {
				this.form.foundDate = e.year + '-' + e.month + '-' + e.day
				this.form.found_date =  e.year + e.month + e.day
			},
			legalCertStartChange(e) {
				this.form.legalCertStartDate = e.year + '-' + e.month + '-' + e.day
				this.form.legal_cert_begin_date =  e.year + e.month + e.day
			},
			legalCertEndChange(e) {
				this.form.legalCertEndDate = e.year + '-' + e.month + '-' + e.day
				this.form.legal_cert_end_date =  e.year + e.month + e.day
			},
			licenseStartChange(e) {
				this.form.licenseStartDate = e.year + '-' + e.month + '-' + e.day
				this.form.license_begin_date =  e.year + e.month + e.day
			},
			licenseEndChange(e) {
				this.form.licenseEndDate = e.year + '-' + e.month + '-' + e.day
				this.form.license_end_date =  e.year + e.month + e.day
			},
			radioChange(type){
				if(type=='license_validity_type'){
					this.form.licenseStartDate = ''
					this.form.license_begin_date =  ''
					this.form.licenseEndDate = ''
					this.form.license_end_date =  ''
				}else{
					this.form.legalCertStartDate = ''
					this.form.legal_cert_begin_date =  ''
					this.form.legalCertEndDate = ''
					this.form.legal_cert_end_date =  ''
				}
			},
			uploadSuccess(files, name){
				this.upload(files).then(res=> {
					if(res.length>0) {
						this.form[name] = this.$_BASE_IMG_API + res[0]
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.form-title{
		font-size: 36rpx;
		font-weight: bold;
		margin: 10rpx 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 6rpx solid #c7c7c7;
	}
</style>